<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素/伪类</title>

    <style>
        a:link {
            /* 未访问过的链接 */
            color: red;
        }

        a:visited {
            /* 访问过的链接 */
            /* 只能修改颜色 */
            color: royalblue;
        }

        a:hover {
            /* 鼠标移动到链接上方 */
            color: salmon;
            font-size: 30px;
        }

        a:active {
            /* 鼠标点击的链接 */
            font-size: 50px;
            color: sandybrown;
        }

        /* 除了visited、link外的伪类，其他标签也可以使用 */
        p:hover {
            background-color: black;
            color: white;
        }

        p:active {
            font-size: 30px;
        }

        p::first-letter {
            /* 第一个字 */
            font-size: 20px;
        }

        p:active::first-letter {
            font-size: 40px;
        }

        p::first-line {
            /* 第一行 */
            color: gray;
        }

        p:hover::first-line {
            color: white;
        }

        .open-menu {
            user-select: none;
            position: relative;
            width: 100px;
            display: flex;
            justify-content: center;
            margin: 20px auto;
            border-radius: 3px;
            border: 1px black solid;
            padding: 5px;
            cursor: pointer;
            color: gold;
            background-color: black;
            font-size: 20px;
            font-weight: 500;
        }

        .open-menu:active::after {
            /* ::after伪元素，介于元素内容结尾与结束标签之间 */
            /* ::before伪元素，介于元素内容开始于开始标签之间 */
            position: absolute;
            content: "屠龙宝刀";
            white-space: nowrap;
            font-size: 100px;
            display: inline-block;
            background-color: black;
            color: red;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 102%);
        }
    </style>
</head>

<body>
    <div>
        <a href="http://wwww.baidu.com">link one</a>
        <br>
        <a href="http://wwww.baidu.com">link two</a>
    </div>
    <hr>
    <div style="width: 50%;margin: 0 auto;">
        <p title="悟空传节选-今何在">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            四个人走到这里，前边一片密林，又没有路了。
            “悟空，我饿了，找些吃的来。”唐僧往石头上大模大样一坐，说道。
            “我正忙着，你不会自己去找？……又不是没有腿。”孙悟空拄着棒子说。
            “你忙？忙什么？”
            “你不觉得这晚霞很美吗？”孙悟空说，眼睛还望着天边，“我只有看看这个，才能每天坚持向西走下去啊。”
            “你可以一边看一边找啊，只要不撞到大树上就行。”
            “我看晚霞的时候不做任何事！”
        </p>
        <div class="open-menu">
            点击就送
        </div>
    </div>
</body>

</html>